<template>
	<view class="p-2">
		<!-- 头像昵称 | 关注按钮 -->
		<view class="flex justify-between align-center">
			<view class="flex align-center">
				<!-- 头像 -->
				<image :src="item.userpic" class="mr-2" style="width: 65rpx;height: 65rpx;border-radius: 100%;" lazy-load @click="openSpace"></image>
				<!-- 昵称&发布时间 -->
				<view>
					<view class="font text-light-muted" style="line-height: 1.5;">{{item.username}}</view>
					<text class="font-sm text-light-muted" style="line-height: 1.5;">{{item.newstime}}</text>
				</view>
			</view>
			<!-- 关注按钮 -->
			<view v-if="!item.isFollow" class="flex justify-center align-center text-white bg-main font rounded animated faster"
			 hover-class=" rubberBand" style="width: 90rpx;height: 50rpx;" @click="follow">关注</view>
		</view>
		<!-- 标题 -->
		<view class="font my-1" @click="openDetail">
			{{item.title}}
		</view>
		<!-- 帖子详情 -->
		<slot>
			<!-- 图片 -->
			<image v-if="item.titlepic" :src="item.titlepic" class="w-100" style="height: 354rpx;" @click="openDetail"></image>
		</slot>
		<!-- 图标按钮 -->
		<view class="flex align-center">
			<!-- 顶 -->
			<view class="flex justify-center align-center flex-1 animated faster" hover-class="jello text-main" :class="item.support.type === 'support' ? 'active-support' : ''"
			 @click="doSupport('support')">
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{item.support.support_count > 0 ? item.support.support_count : '顶'}}</text>
			</view>
			<!-- 踩 -->
			<view class="flex justify-center align-center flex-1 animated faster" hover-class="jello text-main" :class="item.support.type === 'unsupport' ? 'active-support' : ''"
			 @click="doSupport('unsupport')">
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩'}}</text>
			</view>
			<!-- 评论 -->
			<view class="flex justify-center align-center flex-1 animated faster" hover-class="jello text-main" @click="doComment">
				<text class="iconfont icon-pinglun2 mr-2"></text>
				<text>{{item.comment_count > 0 ? item.comment_count : '评论'}}</text>
			</view>
			<!-- 分享 -->
			<view class="flex justify-center align-center flex-1 animated faster" hover-class="jello text-main" @click="doShare">
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{item.share_num > 0 ? item.share_num : '分享'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: {
				type: Number,
				default: -1
			},
			isdetail: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			// 打开个人空间
			openSpace() {
				console.log('打开个人空间')
			},
			// 关注
			follow() {
				this.$emit('follow', this.index)
				uni.showToast({
					title: '关注成功'
				});
			},
			// 进入详情页
			openDetail() {
				if (this.isdetail) {
					return
				}
				uni.navigateTo({
					url: '../../pages/detail/detail?detail=' + JSON.stringify(this.item)
				});
			},
			// 顶踩操作
			doSupport(type) {
				this.$emit('doSupport', {
					type,
					index: this.index
				})
			},
			doComment() {
				if (!this.isdetail) {
					return this.openDetail()
				}
				this.$emit('doComment')
			},
			doShare() {
				if (!this.isdetail) {
					return this.openDetail()
				}
				this.$emit('doShare')
			}
		}
	}
</script>

<style>
	.active-support {
		color: #FF4A6A;
	}
</style>
